import React, { useState, useEffect } from "react";
import { connect } from 'umi';
import { Row, Col, Switch, Space, Modal, Button } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import InitiateLotteryUser from './components/InitiateLotteryUser';
import FormCondition from '@/components/FormCondition';
import TableDataBlock from '@/components/TableDataBlock';
import { lottery_status } from '@/common/contact';
import ModelForm from './components/ModelForm'
import CommerceTable from "./components/CommerceTable";
const interaction = (props) => {
  const { confirm } = Modal
  const { detail = {}, dispatch } = props
  const [visible, setVisible] = useState(false)
  const [userVisible, setUserVisible] = useState(false)
  const [data, setData] = useState({})
  const { id } = detail
  useEffect(() => {
    if (id) {
      fetchLotteryDetail()
    }
  }, [id])
  const fetchLotteryDetail = () => {
    dispatch({
      type: 'liveStreaming/fetchDirectLiveInteractionInfo',
      payload: {
        goodsId: id
      },
      callback: (e) => {
        const { baseInteractionInfo = {}, lotteryList = [], goodsCommerceList = [] } = e
        setData({
          baseInteractionInfo,
          lotteryList,
          goodsCommerceList
        })
      }
    })
  }
  const fetchDataUser = (lid, lotteryName) => {
    dispatch({
      type: 'liveStreaming/fetchGoodsLotteryPrizeUser',
      payload: { goodsId: id, lotteryId: lid },
      callback: (e) => {
        setUserVisible({
          show: true,
          detail: {
            list: e.prizeUserList
          },
          title: lotteryName
        })
      }
    })
  }
  const { baseInteractionInfo = {}, lotteryList = [], goodsCommerceList = [] } = data
  const { lotteryFlag, commerceFlag } = baseInteractionInfo
  const onChange = (checked) => {
    if (checked) {
      dispatch({
        type: 'liveStreaming/fakeEnableGoodsLottery',
        payload: {
          goodsId: id
        },
        callback: (e) => {
          fetchLotteryDetail()
        }
      })
    }
    else {
      showDeleteConfirm()

    }
  };
  const onChangeCommerce = (checked) => {
    if (checked) {
      dispatch({
        type: 'liveStreaming/fakeEnableGoodsCommerce',
        payload: {
          goodsId: id
        },
        callback: (e) => {
          fetchLotteryDetail()
        }
      })
    }
    else {
      dispatch({
        type: 'liveStreaming/fakeDisableGoodsCommerce',
        payload: {
          goodsId: id
        },
        callback: (e) => {
          fetchLotteryDetail()
        }
      })
    }
  }
  const showDeleteConfirm = () => {
    confirm({
      title: '是否确认关闭抽奖?',
      icon: <ExclamationCircleOutlined />,
      content: '关闭后讲师端无法发起新的抽奖，已进行中的抽奖活动不受影响，是否确定关闭？',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'liveStreaming/fakeDisableGoodsLottery',
          payload: {
            goodsId: id
          },
          callback: (e) => {
            fetchLotteryDetail()
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const getColumns = [
    {
      title: '抽奖名称',
      dataIndex: 'lotteryName',
    },
    {
      title: '参与方式',
      dataIndex: 'joinType',
      render: (e) => {
        return lottery_status[e]
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (e) => {
        return {
          0: '未开始',
          1: '进行中',
          2: '已结束',
        }[e]
      }
    },
    {
      title: '奖品数量',
      dataIndex: 'prizeAmount',
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '查看',
          click: () => {
            dispatch({
              type: 'liveStreaming/fetchLotteryDetail',
              payload: {
                lotteryId: val
              },
              callback: (e) => {
                setVisible({
                  show: true,
                  details: { goodsId: id, ...e }
                })
              }
            })
          }
        },
        {
          title: '中奖名单',
          visible: record.status === '2',
          click: () => {
            fetchDataUser(record.id, record.lotteryName)
          }
        }]
    }]
  return (
    <Row gutter={[8, 8]} style={{ width: '100%', display: 'flex', alignItems: 'center', }}>
      <Col style={{ textAlign: 'right' }} span={2}>直播带货</Col>
      <Col offset={1} span={21}>
        <Space>
          <Switch checked={commerceFlag === '1'} onChange={onChangeCommerce} />
          <div>添加直播间商品，提升直播间收益案例</div>
        </Space>

      </Col>
      <CommerceTable reload={fetchLotteryDetail} dispatch={dispatch} detail={detail} defaultDataList={goodsCommerceList}></CommerceTable>
      <Col style={{ textAlign: 'right' }} span={2}>抽奖开关</Col>
      <Col offset={1} span={21}>
        <Space>
          <Switch checked={lotteryFlag === '1'} onChange={onChange} />
          <div>开启抽奖并设置抽奖后，讲师可在直播间发起抽奖，提升直播间氛围以及用户活跃</div>
        </Space>

      </Col>
      { }
      <Col style={{ textAlign: 'right' }} span={2}></Col>
      <Col offset={1} span={21}>
        <Space direction={'vertical'} style={{ width: '100%', marginTop: 12 }}>
          <Button onClick={() => setVisible({
            show: true, details: {
              goodsId: id
            }
          })} type='default'>添加抽奖</Button>
          <TableDataBlock
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            list={lotteryList}
          ></TableDataBlock>
        </Space>
      </Col>
      <ModelForm reload={() => fetchLotteryDetail()} visible={visible} onClose={() => setVisible(false)}></ModelForm>
      <InitiateLotteryUser visible={userVisible} onClose={() => setUserVisible(false)}></InitiateLotteryUser>
    </Row>
  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['commodity/fakeDeleteOfflineGoods']
}))(interaction);;
